import { useRef, Dispatch, SetStateAction } from 'react'
import { CSSTransition } from 'react-transition-group'

interface OverlayProps {
  isOpen: boolean
  setIsOpen: Dispatch<SetStateAction<boolean>>
  children: React.ReactNode
  opacity?: number
}

const Overlay: React.FC<OverlayProps> = (props) => {
  const { isOpen, setIsOpen, children, opacity } = props
  const dropDownRef = useRef(null)
  return (
    <CSSTransition
      nodeRef={dropDownRef}
      in={isOpen}
      timeout={200}
      classNames='overlay'
      unmountOnExit
    >
      <div
        ref={dropDownRef}
        className={`z-50 fixed top-0 left-0 w-screen h-screen bg-black bg-opacity-20`}
        onClick={() => setIsOpen(false)}
      >
        {children}
      </div>
    </CSSTransition>
  )
}

export default Overlay
